<template>
  <el-dialog
  :title="title"
  v-model="showFlag"
  :before-close="handleTypeMappingClose"
  >
    <el-row>
      <el-col :span="4">
        <el-select
            v-model="dbType"
            placeholder="数据库"
            @change="showData"
            filterable>
          <el-option v-for="item in dbOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="tableData">
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column prop="typeReg" label="正则" />
        <el-table-column prop="startWith" label="开头" />
        <el-table-column prop="javaType" label="Java类型" />
      </el-table>
    </el-row>
  </el-dialog>
</template>
<script>
export default {
  props: {
    typeMappingVisible: Boolean,
    dbOptions: Array
  },
  name: 'TypeMapping',
  watch: {
    typeMappingVisible(newVal) {
      this.showFlag = newVal
    }
  },
  data() {
    return {
      showFlag: false,
      title: '类型映射',
      dbType: 'mysql',
      tableData: []
    }
  },
  created() {
    this.showData()
  },
  methods: {
    handleTypeMappingClose() {
      this.$emit('handle-dialog-close', 'typeMapping')
    },
    showData() {
      this.tableData = JSON.parse(localStorage.getItem(this.dbType))
    }
  }
}
</script>
<style></style>
